<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>基本过滤选择器</title>
  <script src="js/jquery-1.11.3.js"></script>
  <style>
    table {
      width: 400px;
      border-collapse: collapse;
      text-align: center;
    }

    thead {
      border-bottom: 2px solid #555;
    }

    tbody>tr+tr {
      border-top: 1px solid #555;
    }

    /* tbody tr:nth-child(2n) {
        background-color: lightcoral;
      } */
  </style>
</head>

<body>
  <h3>基本过滤选择器.</h3>
  <ul>
    <li>child1-basic0</li>
    <li>child2-basic1</li>
    <li>child3-basic2</li>
  </ul>
  <ul>
    <li>child1-basic3</li>
    <li>child2-basic4</li>
    <li>child3-basic5</li>
  </ul>
  <ul>
    <li>child1-basic6</li>
  </ul>

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Firs tName</th>
        <th>Last Name</th>
        <th>User Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>亮</td>
        <td>成</td>
        <td>@liang</td>
      </tr>
      <tr>
        <td>2</td>
        <td>然</td>
        <td>李</td>
        <td>@ran</td>
      </tr>
      <tr>
        <td>3</td>
        <td>东</td>
        <td>张</td>
        <td>@dong</td>
      </tr>
      <tr>
        <td>4</td>
        <td>涛</td>
        <td>程</td>
        <td>@tao</td>
      </tr>
    </tbody>
  </table>

  <script>
    //查找第一个li
    $("li:first").css("color", "red");
    //查找最后一个li
    $("li:last").css("color", "green");
    //查找处于偶数位置的li
    $("li:odd").css("background-color", "orange");
    //查找第2个li
    $("li:eq(1)").css("color", "blue")
    //除了第4个 都有左边框
    $("li:not(li:eq(3))").css("border-left", "1px solid");

    //绿
    $("tbody tr:even ").css("background-color", "lightgreen");
  </script>
</body>

</html>